import React, {Component} from 'react';
import Detail from "./Detail";
import {Link,Route} from "react-router-dom";

class Message extends Component {
    state={
        message:[
            {id:"01",message: "消息1"},
            {id:"02",message: "消息2"},
            {id:"03",message: "消息3"}
        ]
    }
    replaceShow=(item)=>{
       return()=>{
          //  params传参
          this.props.history.replace(`/home/message/detail/${item.id}/${item.message}`)
          //  query传参
          //  this.props.history.replace(`/home/message/detail?id=${item.id}&message=${item.message}`)
          //  state传参
          //  this.props.history.replace({
          //      pathname:'/home/message/detail',
          //      state:{
          //          id:item.id,
          //          message:item.message
          //      }
          //  })
       }
    }
    pushShow=(item)=>{
        return()=>{
            //  params传参
            this.props.history.push(`/home/message/detail/${item.id}/${item.message}`)
            //  query传参
            //  this.props.history.push(`/home/message/detail?id=${item.id}&message=${item.message}`)
            //  state传参
            // this.props.history.push({
            //     pathname:'/home/message/detail',
            //     state:{
            //         id:item.id,
            //         message:item.message
            //     }
            // })
        }
    }

    render() {
        return (
            <div>

                <div>
                    <ul>
                        {
                            this.state.message.map((item)=>{
                                return ( <li key={item.id}>
                                    <Link replace={true} to={{pathname:'/home/message/detail',state:{id:item.id,message:item.message}}}>{item.message}</Link>&nbsp;&nbsp;
                                    <div>
                                        <button onClick={this.pushShow(item)}>push</button>
                                        <button onClick={this.replaceShow(item)}>replace</button>
                                    </div>
                                </li>)

                            })
                        }
                    </ul>
                </div>
               {/* params接收参数*/}
               <Route  path="/home/message/detail/:id/:message" component={Detail}></Route>
               {/* query不用声明接收参数*/}
               {/* <Route  path="/home/message/detail" component={Detail}></Route>*/}
                {/*state不用声明接收参数*/}
                {/*<Route  path="/home/message/detail" component={Detail}></Route>*/}
            </div>
        );
    }
}


export default Message;